<template>
  <div>
    <el-container>
      <el-header>
        <img class="imglog" src="../assets/Exam.png" alt>
        <div class="UserBox">你好：
          <el-dropdown>
            <span class="el-dropdown-link">
              {{UserName}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">黄金糕</el-dropdown-item>
              <el-dropdown-item command="b">狮子头</el-dropdown-item>
              <el-dropdown-item c>个人信息</el-dropdown-item>
              <el-dropdown-item divided>退出登陆</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu :default-openeds="[]">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-message"></i>导航一
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项4-1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>导航二
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="2-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项4-1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-setting"></i>导航三
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="3-1">选项1</el-menu-item>
                <el-menu-item index="3-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="3-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="3-4">
                <template slot="title">选项4</template>
                <el-menu-item index="3-4-1">选项4-1</el-menu-item>
              </el-submenu>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      UserName: "123"
    };
  },
  mounted() {

  },
  methods: {
    handleCommand() {
      console.log(123);
      this.$message("click on item " + command);
    },
    UserClick() {
      alert(123);
    }
  }
};
</script>
<style scoped>
.el-header {
  background-color: #6699ff;
  color: #333;
  text-align: center;
  line-height: 60px;
  height: 8vh !important;
}
.el-aside {
  background-color: #99cccc;
  color: #333;
  text-align: center;
  font-size: 12px;
  height: 92vh !important;
  width: 20vh !important;
}
.el-main {
  background-color: #99ffff;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 92vh !important;
  width: 80vh !important;
}
.el-menu {
  margin-left: -50%;
}
.imglog {
  position: fixed;
  left: 1%;
  top: 0.2%;
  margin-top: 0px;
  margin-left: 1%;
  float: left;
  width: 4%;
}
.UserBox {
  font-weight: bold;
  position: fixed;
  right: 1%;
  line-height: 8vh;
  color: #000;
}
.el-dropdown {
  color: #000;
}
</style>

